<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>分类</title>
  <!-- 重置样式 -->
  <link rel="stylesheet" href="static/css/reset.css">
  <!-- 共同的头部样式 -->
  <link rel="stylesheet" href="static/css/common_header.css">
  <link rel="stylesheet" href="static/css/category.css">
</head>

<body>
  <div class="header">
    <a href="#" class="logo">
      <img src="static/imgs/logo.jpg" class="logo-img" alt="">
    </a>
    <div class="header-c">
      <ul class="nav">
        <!-- 激活通过标识位来实现 -->
        <li class="nav-item active">
          <a href="#" class="item-link">首页</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">女装</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">男装</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">箱包</a>
        </li>
        <li class="nav-item">
          <a href="#" class="item-link">配饰</a>
        </li>
      </ul>
      <div class="search-user">
        <div class="search">
          <input type="text" class="search-input" value="搜索商品名/商品编号">
        </div>
        <div class="user-block">
          <a href="#">
            <img src="static/imgs/like.png" class="icon icon-collect" alt="">
          </a>
          <a href="#" class="margin-43">
            <img src="static/imgs/cart.png" class="icon icon-cart" alt="">
          </a>
          <a href="#">
            <img src="static/imgs/user.png" class="icon icon-user" alt="">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="container-c">
      <div class="cloth-section">
        <div class="cloth-left">
          <p class="cloth-title">外套&针织衫</p>
          <ul class="overcoad-list">
            <li class="overcoad-item">
              <a href="" class="overcoad-link">外套</a>
              <a href="" class="overcoad-link margin-top-20">摇粒绒系列</a>
              <a href="" class="overcoad-link margin-top-20">法兰绒系列</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">休闲外套</a>
              <a href="" class="overcoad-link margin-top-20">针织衫</a>
              <a href="" class="overcoad-link margin-top-20">羽绒服</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">轻型羽绒服</a>
              <a href="" class="overcoad-link margin-top-20">防晒衫</a>
              <a href="" class="overcoad-link margin-top-20">牛仔服</a>
            </li>
          </ul>
        </div>
        <div class="cloth-right">
          <p class="cloth-title">衬衫&T恤</p>
          <ul class="overcoad-list">
            <li class="overcoad-item">
              <a href="" class="overcoad-link">衬衫</a>
              <a href="" class="overcoad-link margin-top-20">新品系列</a>
              <a href="" class="overcoad-link margin-top-20">法兰绒衬衫</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">长袖T恤</a>
              <a href="" class="overcoad-link margin-top-20">短袖T恤</a>
              <a href="" class="overcoad-link margin-top-20">棉麻系列</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">牛仔衬衫</a>
              <a href="" class="overcoad-link margin-top-20">打底衫</a>
            </li>
          </ul>
        </div>

      </div>
      <div class="cloth-section">
        <div class="cloth-left">
          <p class="cloth-title">裤装</p>
          <ul class="overcoad-list">
            <li class="overcoad-item">
              <a href="" class="overcoad-link">阔腿裤</a>
              <a href="" class="overcoad-link margin-top-20">紧身裤</a>
              <a href="" class="overcoad-link margin-top-20">九分裤.七分裤</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">休闲裤</a>
              <a href="" class="overcoad-link margin-top-20">针束脚裤</a>
              <a href="" class="overcoad-link margin-top-20">牛仔裤</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">中裤/短裤</a>
              <a href="" class="overcoad-link margin-top-20">保暖裤</a>
            </li>
          </ul>
        </div>
        <div class="cloth-right">
          <p class="cloth-title">内衣&起居服</p>
          <ul class="overcoad-list">
            <li class="overcoad-item">
              <a href="" class="overcoad-link">居家服</a>
              <a href="" class="overcoad-link margin-top-20">无钢圈文胸</a>
              <a href="" class="overcoad-link margin-top-20">袜子</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">塑身系列</a>
              <a href="" class="overcoad-link margin-top-20">内衣</a>
              <a href="" class="overcoad-link margin-top-20">BALANCE系列</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">带胸垫打底衫</a>
              <a href="" class="overcoad-link margin-top-20">内裤</a>
            </li>
          </ul>
        </div>

      </div>
      <div class="cloth-section">
        <div class="cloth-left">
          <p class="cloth-title">裙装</p>
          <ul class="overcoad-list">
            <li class="overcoad-item">
              <a href="" class="overcoad-link">连衣裙</a>
              <a href="" class="overcoad-link margin-top-20">短裙</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">半身裙</a>
              <a href="" class="overcoad-link margin-top-20">A字裙</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">长裙</a>
            </li>
          </ul>
        </div>
        <div class="cloth-right">
          <p class="cloth-title">孕妇装&亲子装</p>
          <ul class="overcoad-list">
            <li class="overcoad-item">
              <a href="" class="overcoad-link">孕妇装</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">新生儿</a>
            </li>
            <li class="overcoad-item margin-left-100">
              <a href="" class="overcoad-link">亲子装</a>
            </li>
          </ul>
        </div>
      </div>

    </div>

  </div>
  </div>
</body>

</html>